<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>图库管理</title>
    <!-- Bootstrap -->
    <link href="../assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="fonts/iconfont.css" rel="stylesheet">
    <link href="../assets/css/style.css" rel="stylesheet" />
    <link href="../assets/css/tabletable.css" rel="stylesheet" />
    <link href="../assets/css/content.css" rel="stylesheet" />
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
		      <script src="../assets/js/html5shiv.min.js"></script>
		      <script src="../assets/js/respond.min.js"></script>
		      <![endif]-->
  </head>

  <body>
    <!--内容区域-->
    <div class="content">
      <div class="content-header col-md-12">
        <div class="con-header">
          <div class="col-md-7 col-sm-7 col-xs-7">
            <span class="content-title-pre"></span><span class="content-title-word">图库管理</span>
          </div>
          <div class="col-md-5 col-sm-5 col-xs-5">
            <button type="button" class="btn btn-info btn-header">添加+</button>
          </div>
        </div>
      </div>
      <!--搜索项-->
      <div class="content_serach row">
        <input type="text" class="form-control serach_input" placeholder="请输入名称">
        <input type="text" class="form-control serach_input" placeholder="请输入编码">
        <button type="button" class="btn btn-info serach_btn">搜索&nbsp;&nbsp;<i class="icon iconfont icon-sousuo icon_serach"></i></button>
      </div>
      <!--图库列表-->
      <div class="table-responsive mt20">
        <table class="table responsive">
          <thead class="tablethead">
            <tr>
              <th class="firsttd">序号</th>
              <th class="secondta">图片</th>
              <th>名称</th>
              <th>类型</th>
              <th>排序</th>
              <th>创建时间</th>
              <th>状态</th>
              <th class="text-center">操作</th>
            </tr>
          </thead>
          <tbody class="mytable">
            <tr>
              <td class="firsttd">01</td>
              <td class="secondta">
                <div class="rthumbnail" data-toggle="modal" data-target="#myModal">
                  <img src="../assets/images/20150805133816_X8zCQ.thumb.700_0.jpeg" class="tkgl_img_pic">
                </div>
              </td>
              <td>实时退菜信息推送</td>
              <td>蔬菜</td>
              <td>EW51121</td>
              <td>2016年2月3日</td>
              <td>已启用</td>
              <td class="text-center">
                <button type="button" class="btn btn-default btn-table">编辑</button>
                <span class="button-pre"></span>
                <button type="button" class="btn btn-default btn-table red">删除</button>
              </td>
            </tr>
            <tr>
              <td class="firsttd">01</td>
              <td class="secondta">
                <div class="rthumbnail" data-toggle="modal" data-target="#myModal">
                  <img src="../assets/images/20150805133816_X8zCQ.thumb.700_0.jpeg" class="tkgl_img_pic">
                </div>
              </td>
              <td>实时退菜信息推送</td>
              <td>蔬菜</td>
              <td>EW51121</td>
              <td>2016年2月3日</td>
              <td>已启用</td>
              <td class="text-center">
                <button type="button" class="btn btn-default btn-table">编辑</button>
                <span class="button-pre"></span>
                <button type="button" class="btn btn-default btn-table red">删除</button>
              </td>
            </tr>
            <tr>
              <td class="firsttd">01</td>
              <td class="secondta">
                <div class="rthumbnail" data-toggle="modal" data-target="#myModal">
                  <img src="../assets/images/174111bfzxgr6gee6uf6wg.jpg" class="tkgl_img_pic">
                </div>
              </td>
              <td>实时退菜信息推送</td>
              <td>蔬菜</td>
              <td>EW51121</td>
              <td>2016年2月3日</td>
              <td>已启用</td>
              <td class="text-center">
                <button type="button" class="btn btn-default btn-table">编辑</button>
                <span class="button-pre"></span>
                <button type="button" class="btn btn-default btn-table red">删除</button>
              </td>
            </tr>

          </tbody>
        </table>
      </div>
      <div class="paging col-md-6 col-md-offset-6 col-sm-12 col-xs-12 text-right">
        <div class="page-page flr">
          <ul class="pagination">
            <li class="epage">
              <a href="#">上一页</a>
            </li>
            <li class="active">
              <a href="#">1 <span class="sr-only">(current)</span></a>
            </li>
            <li>
              <a href="#">2</a>
            </li>
            <li>
              <a href="#">3</a>
            </li>
            <!--<li><a href="#">4</a></li>-->
            <li>
              <a href="#">...</a>
            </li>
            <li class="epage">
              <a href="#">下一页</a>
            </li>
          </ul>
        </div>
        <div class="page-num flr">共9页，每页10条</div>
      </div>
    </div>
    <!--图片弹出放大-->
    <div class="modal fade model-box" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog tkgl">
        <div class="close_win" data-dismiss="modal"> <i class="iconfont icon-o1"></i></div>
        <div class="modal-content">
          <div class="fangda_img">
            <img src="">
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal -->
    </div>
    <script src="../assets/js/jquery.min.js"></script>
    <script src="../assets/js/bootstrap.min.js"></script>
    <script src="../assets/js/main.js"></script>
    <script type="text/javascript">
      colorStyle();
      // 给奇数行和偶数行不同的颜色
      function colorStyle() {
        $(".mytable").find("tr:even").addClass("oushu");
        $(".mytable").find("tr:odd").addClass("jishu");
        $(".mytable").find("tr:odd td:first-child").addClass("jishu");
      }

      // 给第一列高度
      firstTrHeight()

      function firstTrHeight() {
        for(var i = $(".mytable tr").length - 1; i >= 0; i--) {
          var trht = $(".mytable tr")[i].offsetHeight
          var domtr = $(".mytable tr")[i];
          // 有30px的边距
          $(domtr).children('td').height(trht - 30);
          $(domtr).children('.firsttd').css('line-height', trht - 30 + 'px');
        };
      }
      $(".rthumbnail").on('click', function() {
        var imgsrc = $(this).children('img')[0].src;
        $('.fangda_img').children('img').attr('src', imgsrc)
      })
    </script>
  </body>

</html>